import Vue from 'vue'
import VueRouter from 'vue-router'

// 1. vue使用router
Vue.use(VueRouter)

// 2.定义路由
/*
 配置项
path: string,       // 路径
component?: Component,   //组件路径
name?: string, // 命名路由
components?: { [name: string]: Component }, // 命名视图组件
redirect?: string | Location | Function,
props?: boolean | Object | Function,
alias?: string | Array<string>,
children?: Array<RouteConfig>, // 嵌套路由
beforeEnter?: (to: Route, from: Route, next: Function) => void,
meta?: any,

// 2.6.0+
caseSensitive?: boolean, // 匹配规则是否大小写敏感？(默认值：false)
pathToRegexpOptions?: Object // 编译正则的选项
*/

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () =>
      import(/* webpackChunkName: "about" */ '../views/Home.vue')
  },
  {
    path: '/about:id',
    name: 'About',
    // 路由懒加载
    component: () =>
      import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/list',
    name: 'list',
    // 路由懒加载
    component: () =>
      import(/* webpackChunkName: "about" */ '../views/List.vue')
  }
]

// 3.创建 router 实例，然后传 router 配置
const router = new VueRouter({
  mode: 'history', // 路由模式  默认haxh
  routes
})

// this.$router 访问全局路由器， this.$route 访问当前页面路由

// 4.导出router
export default router

// 5.在main.js中引入并挂载到根实例
// 从而让整个应用都有路由功能

// `------------------------------------------------1 Router的配置项 `
/*
Router实例的 构建选项（配置项）
  {

    routes:[],
    mode:'hash',
    base:'/'
    scrollBehavior:function(){}
  }

  routes: Array<RouteConfig>
  RouteConfig 的类型定义：
  RouteConfig = {
    path: string,
    component?: Component,
    name?: string, // 命名路由
    components?: { [name: string]: Component }, // 命名视图组件
    redirect?: string | Location | Function,
    props?: boolean | Object | Function,
    alias?: string | Array<string>,
    children?: Array<RouteConfig>, // 嵌套路由
    beforeEnter?: (to: Route, from: Route, next: Function) => void,
    meta?: any,

    // 2.6.0+
    caseSensitive?: boolean, // 匹配规则是否大小写敏感？(默认值：false)
    pathToRegexpOptions?: Object // 编译正则的选项
  }

  mode: string
  默认值: "hash" (浏览器环境) | "abstract" (Node.js 环境)
  可选值: "hash" | "history" | "abstract"
  配置路由模式:
  hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。
  history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。
  abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。

  base: string
  默认值: "/"
  应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/"。

  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }
 */
// `------------------------------------------------2 Router的属性 `
/*
  router.app  配置了 router 的 Vue 根实例。
  router.mode 路由模式
  router.currentRoute  当前路由对应的路由信息对象
  router.START_LOCATION  以路由对象的格式展示初始路由地址，即路由开始的地方。可用在导航守卫中以区分初始导航。
  router.beforeEach((to, from) => {
    if (from === VueRouter.START_LOCATION) {
      // 初始导航
    }
  })
  */
// `------------------------------------------------3 Router的方法 `
/*
  // 全局路由进入之前
  router.beforeEach((to, from, next) => {
     必须调用 `next`
  })
  // 全局解析守卫
  router.beforeResolve((to, from, next) => {
     必须调用 `next`
     在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
  })
  // 全局后置钩子
  router.afterEach((to, from) => {不会接受 next 函数也不会改变导航本身})

  //路由独享的守卫
  const router = new VueRouter({
    routes: [
      {
        path: '/foo',
        component: Foo,
        beforeEnter: (to, from, next) => {
          // ...
        }
      }
    ]
  })
  // 组件内的守卫
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    next(vm => {
     // 通过 `vm` 访问组件实例
    })
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
  */
